<template>
<div class="editperson">
    <div class="editform">
        <form @submit.prevent="editform()">
            <p>
                <input type="text" placeholder="请输入姓名" required v-model.lazy.trim="objF.uname" />
            </p>
            <aside>
                <input type="radio" value="0" name="gender" v-model="objF.gender" /><span>女</span>
                <input type="radio" value="1" name="gender" v-model="objF.gender" /><span>男</span>
            </aside>
            <p>
                <input type="number" min="18" max="70" placeholder="请输入年龄" v-model="objF.age" required/>
            </p>
            <p>
                <!-- 将v-model所获取到的value值转换成数字类型数据 -->
                <select required v-model.number="objF.port">
                    <option value="" disabled>--请选择职务--</option>
                    <option value="1">老板</option>
                    <option value="2">总经理</option>
                    <option value="3">部门主管</option>
                    <option value="4">组长</option>
                    <option value="5">员工</option>
                </select>
            </p>
            <p>
            <input type="number" min="2500" placeholder="请输入薪资" v-model.lazy.trim="objF.salary" required/>
            </p>
            <p>
            <input type="date" placeholder="请输入入职日期" v-model="objF.ctime" required/>
            </p>
            <article>
            <input type="submit" value="修改数据"/>
            </article>
        </form>
    </div>
</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
  name:"EditPerson",
  data(){
    return{
        //整个表单对应的对象
        objF:{
            uname : '',
            gender : 0,
            age : 18,
            port : '',
            salary : 2500,
            ctime : ''
        }
    }
  },
  computed:{
    ...mapState(['plist']),
  },
    //生命周期函数
    mounted(){
        this.ind = this.$route.query.i;
        let obj = this.plist[this.ind];

        this.objF = {
            uname : obj.uname,
            gender : obj.gender,
            age : obj.age,
            port : obj.port,
            salary : obj.salary,
            ctime : obj.ctime,
        }
        
    },
    methods:{
        ...mapMutations(['editlist']),
        //提交表单事件
        editform(){
            let nowtime = new Date().getTime;
            let Ctime = new Date(this.objF.ctime).getTime();
            if ( Ctime > nowtime){
                alert('入职时间不得高于系统时间');
                return
            }

            this.editlist( { val:this.objF , id:this.ind } )
        }
    },
  }
</script>

<style scoped>
 .editperson{
    width: 100%;
    height: 100%;
    position: relative;
 }
 .editperson .editform{
    width: 60%;
    overflow: hidden;
    box-shadow: 0px 0px 5px;
    border-radius: 8px;
    margin: 25px auto;
 }
 .editperson .editform p,.editperson .editform article{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 50px;
    margin-top: 25px;
 }
 .editperson .editform article input{
    width: 80%;
    height: 70%;
    margin-bottom: 25px;
 }
 .editperson .editform aside{
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: center;
 }
 .editperson .editform aside span{
    margin-left: 6px;
    margin-right: 30px;
 } 
 .editperson .editform p input{
    width: 80%;
    height: 70%;
 }
 .editperson .editform p select{
    width: 80%;
    border-radius: 6px;
 }
</style>